<template>
	<view class="PageShow">
		<u-toast ref="messageNotice"></u-toast>

		<view class="SwiperShow">
			<u-swiper :list="swiperList" circular radius="5" bgColor="#ffffff" height="300"></u-swiper>
		</view>

		<view class="InfoShow">
			<view class="InfosShow">
				<view class="UserInfoShow" @click="QueryMineHandle">
					<view class="UserAvatarShow">
						<u--image width="100" height="100" src="/static/logoH5.jpg" shape="circle"></u--image>
					</view>
					<view class="UserTxtShow">
						<view class="UserNameShow">
							<view class="NameShow">
								<u--text color="#000000" :text="userNameHandle" size=30></u--text>
							</view>
							<!-- 							<view class="UserNameTagShow">
								<u-tag size="mini" text="标签" plain disabled> </u-tag>
							</view> -->
						</view>
						<view class="UserOtherShow">
							<u--text lines=1 color="#606266"
								:text="'贡献点:' + this.userInfo.gxPoint + '  |  '+ 'IKUN:'+ this.userInfo.ikunPoint"
								size=25></u--text>
						</view>
					</view>

				</view>
				<view class="MainFunctionShow">
					<view class="RankClass" @click="RankHandle">
						<view class="RankTextClass">
							<view class="RankTextTitleClass">
								<u--text color="#000000" text="排行榜" size=40></u--text>
							</view>
							<view class="RankTextDescClass">
								<u--text color="#606266" text="黑房/中介排行榜" size=23></u--text>
							</view>
						</view>
					</view>
					<view class="RightShow">
						<view class="UpShow">
							<view class="QueryShow" @click="QueryRoomHandle">
								<view class="QueryTextShow">
									<view class="QueryTextTitleShow">
										<u--text color="#000000" text="关键字查询" size=40></u--text>
									</view>
									<view class="QueryTextDescShow">
										<u--text color="#606266" text="关键字查看黑房东" size=23></u--text>
									</view>
								</view>
							</view>
						</view>
						<view class="BottomShow">
							<view class="ArroundShow" @click="QueryArroundHandle">
								<view class="ArroundTextShow">
									<view class="ArroundTextTitleShow">
										<u--text color="#000000" text="附近黑房东" size=40></u--text>
									</view>
									<view class="ArroundTextDescShow">
										<u--text color="#606266" text="地图查看周围黑房东" size=23></u--text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="OtherFunctionShow">
					<view class="OtherFunctionTitleShow">
						<u--text color="#000000" text="功能区" size=40></u--text>
					</view>
					<view class="OtherFunctionsShow">
						<u-grid :border="false" col="4">
							<u-grid-item v-for="(listItem,listIndex) in functionList" :key="listIndex">
								<view @click="clickFunctionsHandle(listItem)">
									<u-icon :customStyle="{paddingTop:20+'rpx',width:50+'rpx',height:50+'rpx'}"
										:name="listItem.name" :size="22"></u-icon>
									<text class="grid-text">{{listItem.title}}</text>
								</view>
							</u-grid-item>
						</u-grid>
					</view>
				</view>

				<view class="TopicShow">
					<view class="TopicTitleShow">
						<u--text color="#000000" text="权限区" size=40></u--text>
					</view>
					<view v-for="topicInfo in topicInfoList">
						<view class="TopicInfoShow" :style="{'background-image': 'url(' + topicInfo.img + ')'}"
							@click="clickRoleHandle(topicInfo)" v-if="topicInfo.isShow">
							<view class="TopicInfoTitleShow">
								<u--text color="#000000" :text="topicInfo.title" size=40></u--text>
							</view>
							<view class="TopicInfoDescShow">
								<u--text color="#606266" :text="topicInfo.desc" size=28></u--text>
							</view>
						</view>
					</view>
				</view>

				<view class="DataShow">
					<view class="DataTotalRateShow">
						<view class="DataTotalTitleShow">
							<u--text color="#000000" text="已经释放IKUN" size=40></u--text>
						</view>
						<view class="DataTotalContentShow">
							<u-line-progress :percentage="ikunOutTotalRate" activeColor="#ff0000"
								height="20"></u-line-progress>
						</view>
					</view>
					<view class="DataUserRateShow">
						<view class="DataUserTitleShow">
							<u--text color="#000000" text="您的IKUN" size=40></u--text>
						</view>
						<view class="DataUserContentShow">
							<u-line-progress :percentage="userIkunTotalRate" activeColor="#ff0000"
								height="20"></u-line-progress>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="FixedRightBottomShow">
				<view class="ChangeRoleShow"></view>
			</view> -->
		</view>

	</view>

</template>

<script>
	import {
		getUserProfile
	} from '@/api/system/user.js'
	export default {
		data() {
			return {
				ikunInfo: {
					totalIkun: 1000000,
					outIkun: 1000
				},
				userInfo: {
					userId: "",
					userName: "",
					nickName: "",
					avatar: "",
					sex: "",
					gxPoint: 0,
					ikunPoint: 0,
					roleKey: "",
				},
				swiperList: [
					'/static/logoH5.jpg',
					'/static/logoH5.jpg',
					'/static/logoH5.jpg',
				],
				functionList: [{
					index: 0,
					name: '/static/logoH5.jpg',
					title: '租房',
					url: "/pages/work/index",
					borderColor: {}
				}, {
					index: 1,
					name: '/static/logoH5.jpg',
					title: '服务',
					borderColor: {}
				}, {
					index: 2,
					name: '/static/logoH5.jpg',
					title: '兑换',
					borderColor: {}
				}, {
					index: 3,
					name: '/static/logoH5.jpg',
					title: '我的',
					borderColor: {}
				}, ],
				topicInfoList: [{
						index: 0,
						roleKeys: 'common,manager,admin',
						img: "/static/logoH5.jpg",
						title: "曝光",
						desc: "曝光黑房东/黑中介增加贡献点",
						isShow: true,
					},
					{
						index: 1,
						roleKeys: 'manager,admin',
						img: "/static/logoH5.jpg",
						title: "审核",
						desc: "管理员审核黑房东",
						isShow: false,
					},
					{
						index: 2,
						roleKeys: 'common,manager,admin',
						img: "/static/logoH5.jpg",
						title: "分红",
						desc: "社区积分分红",
						isShow: true,
					},
					{
						index: 3,
						roleKeys: 'admin',
						img: "/static/logoH5.jpg",
						title: "上架",
						desc: "上架可出租房屋",
						isShow: false,
					},
				]
			}
		},
		onLoad() {
			getUserProfile().then(response => {
					this.$store.state.user.nickName = response.data.nickName
				})
			this.userInfo.nickName = this.$store.state.user.nickName
			this.flushTopicInfoList()
		},
		computed: {
			ikunOutTotalRate() {
				return this.ikunInfo.outIkun / this.ikunInfo.totalIkun * 100
			},
			userIkunTotalRate() {
				return this.userInfo.ikunPoint / this.ikunInfo.outIkun * 100
			},
			userNameHandle() {
				this.userInfo.nickName = this.$store.state.user.nickName
				if (this.userInfo == null || this.userInfo.nickName == "") {
					return "未登录"
				}
				return this.userInfo.nickName
			}
		},
		methods: {
			flushTopicInfoList() {
				for (let i in this.topicInfoList) {
					let role = this.topicInfoList[i]
					if (role.roleKeys.split(",").includes(this.userInfo.roleKey)) {
						role.isShow = true
					}
				}
			},
			RankHandle() {
				// let m = "暂未开放【排行榜】"
				// this.$refs.messageNotice.show({
				// 	message: m,
				// 	duration: 1000,
				// 	complete() {}
				// })

				uni.navigateTo({
					url: '/pages/hfdrank/hfdrank'
				})
			},
			QueryRoomHandle() {
				uni.reLaunch({
					url: '/pages/search/index'				})
			},
			QueryArroundHandle() {
				uni.reLaunch({
					url: '/pages/search/index'
				})
			},
			QueryMineHandle() {
				uni.reLaunch({
					url: '/pages/mine/index'
				})
			},
			clickFunctionsHandle(functionItem) {
				let m = "暂未开放【" + functionItem.title + "】"
				this.$refs.messageNotice.show({
					message: m,
					duration: 1000,
					complete() {}
				})
				uni.reLaunch({
					url: functionItem.url
				})
			},
			clickRoleHandle(roleItem) {
				let m = "暂未开放【" + roleItem.title + "】"
				this.$refs.messageNotice.show({
					message: m,
					duration: 1000,
					complete() {}
				})
				uni.reLaunch({
					url: roleItem.url
				})
			}
		}
	}
</script>

<style lang="scss">
	.PageShow {
		background-color: whitesmoke;
		height: 1200rpx;

		.InfoShow {
			display: inline-block;
			position: relative;
			text-align: center;
			z-index: 2;
			top: -30rpx;
			border-radius: 30rpx;
			background-color: white;
			height: 100%;
			width: 100%;


			.InfosShow {
				position: relative;
				z-index: 1;
				top: -80rpx;
				width: 95%;
				display: inline-block;

				.UserInfoShow {
					display: inline-flex;
					width: 100%;
					height: 100rpx;
					margin-top: 100rpx;

					.UserAvatarShow {
						width: 20%;
						height: 100rpx;
						margin-left: 0;
					}

					.UserTxtShow {
						width: 80%;
						height: 50rpx;

						.UserNameShow {
							width: 100%;
							height: 50rpx;
							display: inline-flex;

							.NameShow {
								height: 50rpx;
							}

							.UserNameTagShow {
								width: 70%;
								height: 50rpx;
							}
						}

						.UserOtherShow {
							width: 100%;
							height: 50rpx;
						}
					}
				}

				.MainFunctionShow {
					display: inline-flex;
					width: 100%;
					height: 300rpx;

					.RankClass {
						width: 50%;
						height: 100%;
						border-radius: 30rpx;
						margin-left: 0;
						background-size: cover;
						background-image: url(/static/rankicon.png);

						.RankTextClass {
							width: 35%;
							height: 80rpx;
							margin-left: 10rpx;

							.RankTextTitleClass {
								height: 60%;
								width: 100%;
							}

							.RankTextDescClass {
								height: 40%;
								width: 100%;
							}
						}
					}

					.RightShow {
						margin-right: 0;
						margin-left: auto;
						width: 48%;
						height: 100%;

						.UpShow {
							width: 100%;
							height: 50%;
							margin-left: auto;
							margin-right: 0;
							vertical-align: top;

							.QueryShow {
								width: 100%;
								height: 90%;
								border-radius: 30rpx;
								background-color: whitesmoke;

								.QueryTextShow {
									width: 70%;
									height: 80rpx;
									margin-left: 10rpx;

									.QueryTextTitleShow {
										height: 60%;
										width: 100%;
									}

									.QueryTextDescShow {
										height: 40%;
										width: 100%;
									}
								}
							}
						}

						.BottomShow {
							width: 100%;
							height: 50%;
							margin-left: auto;
							margin-right: 0;
							display: flex;
							align-items: flex-end;

							.ArroundShow {
								width: 100%;
								height: 90%;
								border-radius: 30rpx;
								background-color: whitesmoke;

								.ArroundTextShow {
									width: 70%;
									height: 80rpx;
									margin-left: 10rpx;

									.ArroundTextTitleShow {
										height: 60%;
										width: 100%;
									}

									.ArroundTextDescShow {
										height: 40%;
										width: 100%;
									}
								}
							}
						}

					}

				}

				.OtherFunctionShow {
					margin-top: 20rpx;
					width: 100%;
					height: 150rpx;

					.OtherFunctionTitleShow {
						width: 100%;
						height: 50rpx;
					}

					.OtherFunctionsShow {
						width: 100%;
					}
				}

				.TopicShow {
					margin-top: 20rpx;
					width: 100%;
					height: 100%;
					display: inline-block;
					position: relative;
					text-align: center;

					.TopicTitleShow {
						width: 100%;
						height: 50rpx;
					}

					.TopicInfoShow {
						margin-top: 10rpx;
						width: 100%;
						height: 100rpx;
						border-radius: 30rpx;

						.TopicInfoTitleShow {
							margin-left: 10rpx;
							width: 40%;
							height: 50rpx;
						}

						.TopicInfoDescShow {
							margin-left: 10rpx;
							width: 60%;
							height: 50rpx;
						}

					}

					.TopicInfoSingleShow {
						border: 3rpx solid transparent;
					}
				}

				.DataShow {
					margin-top: 10rpx;
					width: 100%;
					height: 200rpx;

					.DataTotalRateShow {
						width: 100%;
						height: 100rpx;
						border-radius: 30rpx;

						.DataTotalTitleShow {
							width: 100%;
							height: 50rpx;
						}

						.DataTotalContentShow {
							width: 100%;
							height: 50rpx;
						}

					}

					.DataUserRateShow {
						border-radius: 30rpx;
						width: 100%;
						height: 75rpx;

						.DataUserTitleShow {
							width: 100%;
							height: 50rpx;
						}

						.DataUserContentShow {
							width: 100%;
							height: 50rpx;
						}
					}

				}
			}

			.FixedRightBottomShow {
				position: relative;
				display: flex;
				height: 200rpx;
				width: 100%;
				background-color: pink;
				margin-top: -400rpx;
				z-index: 100;
				opacity: 0.4;

				.ChangeRoleShow {
					margin-right: 0rpx;
					background-color: greenyellow;
					height: 200rpx;
					width: 20%;

				}
			}
		}



	}
</style>